<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Theme</title>
</head>
<body>
<label for="theme">选择主题：</label>
<select id="theme">
<option value="white">白</option>
<option value="black">黑</option>
<option value="purple">紫</option>
<option value="yellow">黄</option>
<option value="lime">青</option>
</select>
<p style="width: 400px;">
Lorem ipsum的大部分文本源于西赛罗的《善恶之尽》（De finibus bonorum et malorum）中1.1
0.32-3小节。Neque porro quisquam est qui dolorem
ipsum quia dolor sit amet, consectetur, adipisci velit （“无人爱苦，亦无人寻之欲之，
乃因其苦”）是第一个众所周知的版本。这是由一名弗吉尼亚Hampden-Sydney
大学的出版社社长，也是一名文献学者的Richard McClintock所发现；他在经典拉丁文学中查找“conse
ctetur”一词相关引用时发现，这个词汇在文学体中使用频率相当低。
</p>
<script>
const select = document.querySelector("select");
const html = document.querySelector("html");
document.body.style.padding = "10px";
function update(bgColor, textColor) {
html.style.backgroundColor = bgColor;
html.style.color = textColor;
}
select.addEventListener("change", () => {
switch(select.value) {
case 'black':
update('black', 'white');
break;
case 'white':
update('white', 'black');
break;
case 'purple':
update('purple', 'white');
break;
case 'yellow':
update('yellow', 'purple');
break;
case 'psychedelic':
update('lime', 'purple');
break;
}
});
</script>
</body>
</html>